<template>
    <div
      id="ActivityManage"
      class="router-box router-box__inner"
      pageName="活动管理"
    >
      <aside class="search-info__outer">
        <div class="search-info__inner">
          <div>
            <span>活动主题：</span
            ><el-input
              style="display: inlin-block; width: 10rem"
              v-model="title"
              size="small"
              maxlength="15"
              placeholder="请输入"
            ></el-input>
          </div>
  
          <div>
            <span>活动开始时间：</span>
            <el-date-picker
              v-model="startDate"
              size="small"
              style="display: inlin-block; width: 10rem"
              value-format="yyyy-MM-dd 00:00:00"
              :picker-options="pickerOptions1"
              clearable
              type="date"
              placeholder="请选择"
            ></el-date-picker>
          </div>
          <div>
            <span>结束时间：</span>
            <el-date-picker
              v-model="endDate"
              size="small"
              style="display: inlin-block; width: 10rem"
              value-format="yyyy-MM-dd 00:00:00"
              :picker-options="pickerOptions2"
              clearable
              type="date"
              placeholder="请选择"
            ></el-date-picker>
          </div>
  
          <div>
            <span>活动地点：</span>
            <el-select
              v-model="placeId"
              placeholder="请选择"
              size="small"
              style="width: 10rem"
            >
              <el-option
                v-for="item in addressList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </div>
  
          <span>
            <cf-button
              text="查 询"
              color="transparent"
              border="#1C9399"
              :textStyle="{ color: '#1C9399' }"
              @handleClick="getUserList"
            ></cf-button>
            <cf-button
              class="button"
              text="重 置"
              color="#FAFAFA"
              border="#DDDDDD"
              :textStyle="{ color: '#666666' }"
              @handleClick="resetSearch"
            ></cf-button>
          </span>
        </div>
      </aside>
  
      <div class="main-box">
        <aside class="main-top">
          <span v-if="!$store.state.promise"></span>
          <cf-button
            text="新建"
            v-if="this.$store.state.promise"
            iconUI="el-icon-plus"
            @handleClick="handleOperate('', { name: '新建', type: 0 })"
          ></cf-button>
          <span class="float-right"
            >共有 <span class="redFont">{{ pageData.total }}</span> 条数据</span
          >
        </aside>
        <aside class="main-table">
          <cf-table
            :tableHeadList="tableHead"
            :tableData="tableData"
            showSerial="序号"
            fixed="right"
            :indexMethod="pageData.pageSize * (pageData.pageNum - 1) + 1"
            :operateList="operateList"
            :operateWidth="operateList.length * 65"
            @handleOperate="handleOperate"
          ></cf-table>
          <span class="separate"></span>
          <page-nation
            :paginationData="pageData"
            @paginationSearch="getUserList"
          ></page-nation>
        </aside>
      </div>
      <!-- 删除 -->
      <cf-dialog :dialogDefault="dialogShow" :loading="loading" :content="`确定要删除这条数据么？`" submitText="提 交" @dialogDetermine="dialogDetermine" @closeDialog="closeDialog"></cf-dialog>
      <!-- 新建 -->
      <!-- <create-dialog ref="dialogShow" queryPath="/staff/checkPid" pageType="3" toPath="/volunteers_edit" :query="query" @closeCreate="closeDialog"></create-dialog> -->
  
    </div>
  </template>
  <script>
  import CfButton from "@/components/common/CFpcButton";
  import CfTable from "@/components/common/CFpcTable";
  import PageNation from "@/components/common/Pagination";
  import CfDialog from "@/components/common/CFpcDialog";
  import CreateDialog from "@/components/commonView/CreateDialog";
  export default {
    name: "ActivityManage",
    components: { CfButton, CfTable, PageNation, CfDialog, CreateDialog },
    data() {
      return {
        id: "",
        title: "", // 活动主题
        placeId: "", // 活动地点
        startDate: "", // 查询条件，开始时间
        endDate: "", // 查询条件，结束时间
        pageData: {
          // 分页数据
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
  
        // 时间
        pickerOptions1: {
          // 开始日期时间限制
          disabledDate: (time) => {
            if (this.endDate)
              return time.getTime() > new Date(this.endDate) - 8.64e6;
          },
        },
        pickerOptions2: {
          // 结束日期时间限制
          disabledDate: (time) => {
            if (this.startDate)
              return time.getTime() - 8.64e6 < new Date(this.startDate);
          },
        },
        addressList: [
          // { name: "一号会议室", id: "0", key: "1acd" },
          // { name: "户外", id: "1", key: "age4" },
        ],
        tableHead: [], // 表头
        tableData: [
          // {
          //   id: '1',
          //   title: '老年人保健的讲座',
          //   holdDay: '2023-09-10',
          //   updateMan: '陈书记',
          //   updateDate: '2023-09-10 15:00:00',
          //   placeName: '户外'
          // }
        ], // 表格数据
        operateList: [], // 操作列表
        // operateType: "", // 操作类型
        // operateInfo: '', // 操作栏需要的数据
        operateType: {}, // 操作类型
        operateInfo: {}, // 操作栏需要的数据
        dialogShow: false, // 弹框是否显示
        query: {}, // 页面跳转数据
        loading: false, // 按钮状态
      };
    },
    created() {
      this.tableHead = [{ name: "活动主题", prop: "title" }, { name: "活动日期", prop: "startDate" }, { name: "更新人", prop: "createUser" }, { name: "更新时间", prop: "updateDate" }, { name: "活动地点", prop: "placeName" }];
  
      this.$store.state.promise
        ? (this.operateList = [
            { name: "查看", type: 2 },
            { name: "编辑", type: 1 },
            { name: "删除", type: 9 },
          ])
        : (this.operateList = [{ name: "查看", type: 2 }]);
  
      this.resetSearch();
    },
    mounted(){
      this.getBaseList()
      this.initSearch();
    },
    methods: {
      // 下拉的列表
      getBaseList(){
        let param = {
          pageNum: this.pageData.pageNum,
          pageSize: this.pageData.pageSize,
          parentId: this.$encryptByDES('801'),
          type: '201'
        }
        this.$request.get('/basicData/pagedQuery', param, res => {
          console.log('sswwq', res);
          this.addressList = res.list
          // this.tableData = res.list
          // this.pageData.total = res.total
        })
      },
      /* 条件初始赋值 */
      initSearch(){
        this.placeId='';
      },
      /* 重置 */
      resetSearch() {
        this.title = "";
        this.placeId = "";
        this.startDate = "";
        this.endDate = "";
        // this.labelName = "";
        this.pageData.pageNum = 1;
        this.getUserList();
      },
      getUserList() {
        
        let param = {
          pageNum: this.pageData.pageNum,
          pageSize: this.pageData.pageSize,
          title: this.title,
          startDate: this.startDate,
          endDate: this.endDate,
          placeId: this.placeId
        }
        this.$request.get('/newActivity/list', param, res => {
          console.log("123list列表", res);
          this.tableData = res.list;
          this.pageData.total = res.total;
        })
      },
      /* 点击操作栏 */
      handleOperate(row, operate) {
        this.operateType = operate
        this.operateInfo = row;
        console.log("点击操作栏", row, operate);
        // return
        if(operate.type === 3 || operate.type === 9){
          this.dialogShow = true;
        } else {
          // 页面跳转
          const pageName = operate.type === 2 ? '查看详情' : operate.name
  
          // let str = JSON.stringify(row);
          // let encodedObj = JSON.stringify(row)
          // console.log('sss', encodedObj);
          console.log('iiiiid', row);
          this.query = {
            id: row.id,
            pageType: operate.type,
            pageName: `1:${pageName}`,
            // str: str
          }
          
          this.$router.push({
            path: "/activity_edit", 
            query: this.query,
            // params: {
            //   myObj: encodedObj
            // }
          });
        }
      },
      /* 弹窗提交按钮 */
      dialogDetermine() {
        console.log('删除！', this.operateInfo.id);
        let param = {
          id: this.operateInfo.id,
        }
        this.$request.delete("/newActivity/delete", param, res => {
          this.closeDialog();
          this.tools.popMessage("活动删除成功", 1);
          this.getUserList();
        }, err => {
          this.loading = false;
        })
      },
      /* 关闭弹窗 */
      closeDialog() {
        this.dialogShow = false;
        this.loading = false;
        this.operateType = "";
        this.operateInfo = {};
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .main-box {
    padding: 0.94rem;
    .main-top {
      @include flex-layout($justify: space-between);
    }
    .main-table {
      padding-top: 0.94rem;
    }
  }
  </style>
  